<template>
  <div class="topSlide">
    <div class="div"></div>
    <div class="box"></div>
  </div>
</template>

<script>
import "animate.css"
export default {
  data () {
    return {
    }
  },
  mounted () {
  }
}
</script>

<style lang='less' scoped>
.topSlide {
  width: 100%;
  height: calc(100%);
  overflow-y: auto;
  position: relative;
  .div {
    width: 100px;
    height: 100px;
    background-color: rgb(241, 182, 182);
    animation: example 3s infinite;
    // border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: rgb(241, 182, 182);
    animation: rotate 0.6s infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

@keyframes rotate {
  to {
    transform: scale(1) rotate(0deg);
  }
  from {
    transform: scale(1) rotate(180deg);
  }
}
@keyframes example {
  0% {
    // transform: scale(1) rotate(30deg);
    top: 0;
    left: 0;
  }
  25% {
    // background: rgb(255, 255, 203);
    top: calc(100% - 100px);
    left: 0%;
  }
  50% {
    // background: rgb(255, 255, 203);
    top: calc(100% - 100px);
    left: calc(100% - 100px);
  }
  75% {
    // background: rgb(210, 248, 210);
    top: 0%;
    left: calc(100% - 100px);
  }
  100% {
    // transform: scale(1) rotate(900deg);
    top: 0;
    left: 0;
  }
}
</style>